
<template>
  <el-container>
    <el-header>
      <PageHeader title="药品信息"></PageHeader>
    </el-header>
    <el-main>
      <div class="main_bg">
        <div class="border">
          <el-row>
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="药品名称：">
                <el-input
                  placeholder="请输入药品名称"
                  v-model="name"
                ></el-input>
              </el-form-item>
              <el-form-item label="药品类型" style="margin-left: 40px">
                 <el-select
                v-model="type"
                placeholder="请选择要查询的类型"
              >
                <el-option label="中药" value="中药"></el-option>
                <el-option label="西药" value="西药"></el-option>
              </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="info" @click="drug">重置</el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <el-table
            :data="tableData"
            border
            style="width: 100%; border-radius: 7px"
          >
            <el-table-column prop="drugName" label="药品名称" width="250">
            </el-table-column>
            <el-table-column prop="specifications" label="规格" width="250">
            </el-table-column>
            <el-table-column prop="manufactor" label="单位" width="250">
            </el-table-column>
            <el-table-column prop="sellPrice" label="价格" width="250">
            </el-table-column>
            <el-table-column prop="chargeType" label="药品类型" width="250">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="obj">
                <router-link
                  :to="{
                    path: '/manage/j_Particulars',
                    query: { id: obj.row.id,
                    drugName:obj.row.drugName,
                    specifications:obj.row.specifications,
                    manufactor:obj.row.manufactor,
                    sellPrice:obj.row.sellPrice,
                    chargeType:obj.row.chargeType   },
                  }"
                >
                  <el-button type="warning" size="mini">修改</el-button>
                </router-link>
                <el-button
                  type="danger"
                  @click="open(obj.row.id)"
                  style="margin-left: 10px"
                  size="mini"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-row>
          <el-col class="fy">
            <div class="block" ref="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="nowpage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="this.count"
              >
              </el-pagination>
            </div>
            <div class="block" ref="pag" style="display: none">
              <el-pagination
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="nowpage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="this.count"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import PageHeader from "./../common/PageHeader.vue";
export default {
  data: function () {
    return {
      a: false,
      name: "",
      type: "",
      nowpage: 1,
      pageSize: 5,
      count: 5,
      visible: false,
      tableData: [
        {
          id: 1,
          name: "阿莫西林",
          specification: "0.5g*12粒",
          monad: "盒",
          price: "$30",
          type: "西药",
        },
        {
          id: 2,
          name: "六味地黄丸",
          specification: "0.5g*100粒",
          monad: "瓶",
          type: "西药",
        },
      ],
      Search: [],
      formInline: {
        type: "",
      },
    };
  },
  created() {
    this.drug();
  },
  components: {
    PageHeader,
  },
  methods: {
    search() {
      console.log(this.name);
      console.log(this.type);

      this.axios({
        method: "post",
        url: "/drug/List",
        data: {
          page: this.nowpage,
          pageSize: this.pageSize,
          drugName: this.name,
          chargeType: this.type,
        },
      }).then((res) => {
        console.log(res.data.data);
        this.count = res.data.count;
        this.tableData = res.data.data;
        console.log(this.$refs.block);
        let fy = this.$refs.block;
        let pag = this.$refs.pag;
        pag.style.display = "block";
        fy.style.display = "none";
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.drug();
    },
    handleCurrentChange(val) {
      this.nowpage = val;
      console.log(`当前页: ${val}`);
      this.drug();
    },
    handleSizeChange1(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.search();
    },
    handleCurrentChange1(val) {
      this.nowpage = val;
      console.log(`当前页: ${val}`);
      this.search();
    },
    drug() {
      this.axios({
        method: "post",
        url: "/drug/List",
        data: {
          page: this.nowpage,
          pageSize: this.pageSize,
        },
      })
        .then((res) => {
          console.log(res);
          console.log(res.data);
          console.log(res.data.data);
          this.count = res.data.count;
          this.tableData = res.data.data;
          (this.name = ""), (this.type = "");
        })

        .catch((err) => console.log(err));
    },
    open(_id) {
      console.log(_id);
      this.$confirm("是否确认删除该条药品的信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })

        .then(() => {
          console.log(_id);
          this.axios({
            method: "get",
            url: "/drug/delete/" + _id,
          })
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功！",
              });
              this.drug();
            })
            .catch(() => {
              this.$message.error("删除药品信息失败了喔！请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.main_bg {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(182, 179, 179);
  /* height: 500px; */
  border-radius: 5px;
  padding: 20px;

  box-shadow: 0 0 3px 1px rgb(136, 135, 135);
}
.border {
  border: 1px solid rgb(182, 179, 179);
  border-radius: 5px;
  padding: 20px;
}
.fy {
  border: 1px solid rgb(182, 179, 179);
  border-radius: 5px;
  margin-top: 20px;
  padding: 5px;
  text-align: center;
  background-color: rgb(245, 243, 243);
}
</style>